<template>
  <el-dialog
    class="custom-dialog"
    v-model="dialogVisible"
    title="园区详情"
    width="1200px"
    @close="handleClose"
  >
    <div class="custom-detail">
      <el-row :gutter="20">
        <el-col :span="12">
          <span class="label">园区名称:</span>
          <span class="value">{{ form.name }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">园区地址:</span>
          <span class="value">{{ form.address }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">园区经纬度:</span>
          <span class="value">{{ form.position }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">园区面积(m²):</span>
          <span class="value">{{ form.area }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">园区描述:</span>
          <span class="value">{{ form.description }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">是否启用:</span>
          <span class="value">{{ getDictValue('yn', detail.enable) }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">园区范围:</span>
          <span class="value">
            <FileList width="250" :list="form.geojsonFile" />
          </span>
        </el-col>
        <el-col :span="24">
          <span class="label">园区图片:</span>
          <span class="value">
            <FileList fileType="picture" :list="form.files" />
          </span>
        </el-col>
      </el-row>
      <div class="title">土地信息</div>
      <el-table class="custom-table" :data="form.mapRegions">
        <el-table-column prop="propertyOwner" label="产权人">
          <template #default="scope">
            {{
              getDictValue('propertyUnit', scope.row.propertyOwner)
            }}</template
          >
        </el-table-column>
        <el-table-column prop="certificate" label="土地产权证号" />
        <el-table-column prop="name" label="宗地名称" />
        <el-table-column prop="area" label="土地面积(m²)" />
        <el-table-column prop="character" label="土地性质">
          <template #default="scope"
            >{{ getDictValue('landNature', scope.row.character) }}
          </template>
        </el-table-column>
        <el-table-column prop="usage" label="土地用途">
          <template #default="scope">
            {{ getDictValue('landUse', scope.row.usage) }}</template
          >
        </el-table-column>
        <el-table-column prop="useStatus" label="使用情况">
          <template #default="scope">
            {{ getDictValue('landUsage', scope.row.useStatus) }}</template
          >
        </el-table-column>
        <el-table-column prop="useYear" label="使用年限" />
        <el-table-column prop="status" label="范围文件">
          <template #default="scope">
            <FileList width="100" :list="scope.row.files" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
import FileList from '@/components/fileList/index.vue'
import { parkDetail } from '@/api/manager/dataManage/park'
import { useDict } from '@/hooks/useDict'
const {
  dictOptions,
  initListDictOptions,
  initTreeDictOptions,
  getDictValue,
  getDictStyle,
} = useDict()
const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
})
watch(
  () => props.detail,
  async () => {
    if (props.detail.pkid) {
      handleDetail()
    }
  },
)
const form = ref({
  mapRegions: [],
})
const handleDetail = async () => {
  const res = await parkDetail({ pkid: props.detail.pkid })
  if (res.success) {
    // 处理园区范围文件
    if (res.data.geoJsonFile) {
      res.data.geojsonFile = [res.data.geoJsonFile]
    }
    // 处理园区图片
    res.data.files = res.data.fileList
    delete res.data.fileList
    delete res.data.geoJsonFile
    // 处理土地范围文件
    res.data.mapRegions.forEach((item) => {
      if (item.geoJsonFile) {
        item.files = [item.geoJsonFile]
      } else {
        item.files = []
      }
      delete item.geoJsonFile
    })
    form.value = { ...res.data }
  } else {
    ElMessage.error(res.message)
  }
}
const emit = defineEmits(['close'])
const dialogVisible = ref(false)
const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}
defineExpose({ dialogVisible })
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  padding: 0 0 5px 15px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  color: #151515;
  position: relative;
  margin-bottom: 10px;
  &::before {
    content: ' ';
    position: absolute;
    width: 4px;
    height: 16px;
    background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
    border-radius: 2px;
    top: 0px;
    left: 0px;
  }
  .el-button {
    margin-left: 10px;
  }
}
</style>
